<template>
  <div style="padding:30px;">
    <el-form ref="queryFrom" :inline="true" :model="queryFrom" class="demo-form-inline">
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" class="el-button--mini" @click="queryData">刷新</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      :row-style="{height:'10px'}"
      :cell-style="{padding:'0px'}"
    >
      <el-table-column
        prop="id"
        label="ID"
        sortable
        width="300"
      />
      <el-table-column
        prop="code"
        label="地区code"
        width="480"
      />
      <el-table-column
        prop="name"
        label="地区名称"
        width="480"
      />
      <el-table-column prop="type" align="center" label="地区类型 省/市/区县" width="350">
        <template slot-scope="scope">
          <el-tag :type="scope.row.type | statusTagFilter">
            {{ scope.row.type | statusfilters }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import { queryRegion } from '@/api/goods/index'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    },
    timefilters(val) {
      if (val == null || val === '') {
        return '暂无时间'
      } else {
        const d = new Date(val) // val 为表格内取到的后台时间
        const month =
          d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1
        const day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate()
        const hours = d.getHours() < 10 ? '0' + d.getHours() : d.getHours()
        const min = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes()
        const sec = d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds()
        const times = d.getFullYear() + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + sec
        return times
      }
    },
    statusfilters(val) {
      if (val == null || val === '') {
        return '--'
      } else {
        if (val === 1) {
          return '省'
        }
        if (val === 2) {
          return '市'
        }
        if (val === 3) {
          return '区/县'
        }
      }
    },
    statusTagFilter(val) {
      const statusMap = {
        '1': 'success',
        '2': 'info',
        '3': 'danger',
        '4': 'danger'
      }
      return statusMap[val]
    },
    editStatusTagFilter(val) {
      const statusMap = {
        '1': 'warning',
        '9': 'success'
      }
      return statusMap[val]
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      dialogLoading: true,
      dialogTitle: '',
      formLabelWidth: '100px',
      queryFrom: {
        code: '',
        name: '',
        status: ''
      },
      tableData: [],
      loading: true
    }
  },
  created() {
    this.queryData()
  },
  methods: {
    queryData() {
      this.loading = true
      queryRegion().then(response => {
        this.tableData = response.data
        this.loading = false
      })
    },
    load(tree, treeNode, resolve) {
      const tr = []
      tree.children.forEach((p) => {
        if (p.children !== null && p.children.length > 0) {
          tr.push({
            id: p.id,
            name: p.name,
            code: p.code,
            status: p.status,
            createTime: p.createTime,
            updateTime: p.updateTime,
            icon: p.icon,
            uri: p.uri,
            children: p.children,
            hasChildren: true
          })
        } else {
          tr.push({
            id: p.id,
            name: p.name,
            code: p.code,
            status: p.status,
            createTime: p.createTime,
            updateTime: p.updateTime,
            icon: p.icon,
            uri: p.uri,
            hasChildren: false
          })
        }
      })
      resolve(tr)
    }
  }
}
</script>
